<template>
  <view class="pageNum-container">
    <view class="back_img"></view>
    <view class="content-wrapper">
      <view class="dadwafgada" style="padding-top: 50px; display: flex; justify-content: center">
        <text class="awdawdfa">{{ hdinfo.activityName }}</text>
      </view>
      <!-- 投票结束后展示前三名 -->
      <view class="top-three-container">
        <view class="top-three-title">人气榜</view>
        <view class="top-three-list">
          <view class="top-item second" v-if="topParticipants[1]">
            <image
              class="top-avatar"
              :src="
                topParticipants[1].applicationAvatar
                  ? topParticipants[1].applicationAvatar.includes('http')
                    ? topParticipants[1].applicationAvatar
                    : IMG_URL + topParticipants[1].applicationAvatar
                  : defaultAvatar
              "
            ></image>
            <text class="top-name">{{ topParticipants[1].applicationName }}</text>
            <text class="top-votes">{{ topParticipants[1].numberOfVotes }}票</text>
            <view class="medal second-medal">Top2</view>
          </view>
          <view class="top-item first" v-if="topParticipants[0]">
            <image
              class="top-avatar"
              :src="
                topParticipants[0].applicationAvatar
                  ? topParticipants[0].applicationAvatar.includes('http')
                    ? topParticipants[0].applicationAvatar
                    : IMG_URL + topParticipants[0].applicationAvatar
                  : defaultAvatar
              "
            ></image>
            <text class="top-name">{{ topParticipants[0].applicationName }}</text>
            <text class="top-votes">{{ topParticipants[0].numberOfVotes }}票</text>
            <view class="medal first-medal">Top1</view>
          </view>
          <view class="top-item third" v-if="topParticipants[2]">
            <image
              class="top-avatar"
              :src="
                topParticipants[2].applicationAvatar
                  ? topParticipants[2].applicationAvatar.includes('http')
                    ? topParticipants[2].applicationAvatar
                    : IMG_URL + topParticipants[2].applicationAvatar
                  : defaultAvatar
              "
            ></image>
            <text class="top-name">{{ topParticipants[2].applicationName }}</text>
            <text class="top-votes">{{ topParticipants[2].numberOfVotes }}票</text>
            <view class="medal third-medal">Top3</view>
          </view>
        </view>
      </view>

      <!-- Tabs -->
      <!--  <view class="tabs-container">
        <u-tabs :list="tabList" @change="changeTab" :current="currentTab" keyName="name"></u-tabs>
      </view> -->

      <!-- 搜索框 -->
      <view class="search-container">
        <u-search
          height="80"
          searchIconSize="40"
          bgColor="#fff"
          v-model="searchKeyword"
          @search="handleSearch"
          @clear="handleClear"
          placeholder="请输入选手姓名"
          :showAction="false"
        ></u-search>
      </view>

      <!-- 主体内容 -->
      <view class="content-container">
        <!-- 瀑布流展示参与人员 -->
        <view class="waterfall-container">
          <view class="waterfall-column" v-for="(column, colIndex) in columns" :key="colIndex">
            <view class="participant-card" v-for="(item, index) in column" :key="item.id" @click="goToDetail(item.id)">
              <view class="participant-index">{{ getColumnIndex(colIndex, item) }}</view>
              <image
                class="participant-image"
                :src="item.applicationAvatar ? (item.applicationAvatar.includes('http') ? item.applicationAvatar : IMG_URL + item.applicationAvatar) : defaultAvatar"
                mode="aspectFill"
              ></image>
              <view class="participant-info">
                <text class="participant-name">{{ item.applicationName }}</text>
                <view class="vote-info">
                  <text class="vote-count">票数：{{ item.numberOfVotes }}</text>
                  <button class="vote-button" @click.stop="voteFor(item)" :disabled="isActivityEnded">投票</button>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 加载更多 -->
        <u-loadmore :status="loadStatus" v-if="participants.length > 0 && !isActivityEnded" />
      </view>
      <!-- 倒计时 -->
      <view class="countdown-container">
        <text class="countdown-label">距离活动结束还有：</text>
        <view class="countdown-timer">
          <text class="time-unit">{{ days }}天</text>
          <text class="time-unit">{{ hours }}时</text>
          <text class="time-unit">{{ minutes }}分</text>
          <text class="time-unit">{{ seconds }}秒</text>
        </view>
      </view>
    </view>
    <u-popup :show="isShow" :round="10" mode="bottom">
      <view style="padding: 20px 20px 20px 20px">
        <!-- <div style="float: right; color: #999; font-size: 12px" >暂不设置</div> -->
        <div style="font-weight: bold; margin-top: 15px; letter-spacing: 1.5px">设置您的昵称与头像</div>
        <div style="font-size: 12px; padding: 5px 0px 10px 0px; border-bottom: 1px solid #ededed">用户抽奖奖品兑换认证</div>
        <div style="display: flex; height: 60px; font-size: 13px; align-items: center; border-bottom: 1px solid #ededed">
          <div style="width: 60px">头像</div>
          <div>
            <button open-type="chooseAvatar" class="dawdaw" @chooseavatar="onChooseAvatar">
              <image :src="newAvatar.indexOf('http') != -1 ? newAvatar : IMG_URL + newAvatar" style="width: 40px; height: 40px"></image>
            </button>
          </div>
        </div>
        <div style="display: flex; height: 60px; font-size: 13px; align-items: center; border-bottom: 1px solid #ededed">
          <div style="width: 60px">昵称</div>
          <div>
            <input type="nickname" v-model="nickname" placeholder="请输入昵称" />
          </div>
        </div>
        <div style="margin-top: 15px; display: flex; justify-content: center">
          <button class="dawdjnhuhie" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">保 存</button>
        </div>
      </view>
    </u-popup>
  </view>
</template>
<script>
import { applicationList, getactivity, votesinfo, getactivitylist, votesinfoSum } from "../../../utils/api/vote";
import { IMG_URL } from "../../../config/index";
import { programlogin, phoneAndPassword, getUserInfo, getUserPhoneNumber, newUserIntegral } from "../../../utils/request_api.js";
import { userEdit } from "../../../utils/api/local";
import { notBindingPhone } from "../../../utils/api/api.js";
export default {
  data() {
    return {
      nickname: "微信用户",
      newAvatar: "https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/20/f_20250320164147A002.png",
      isShow: false,
      IMG_URL,
      hdinfo: {},
      participantCount: 0, // 参与选手数
      totalVotes: 0, // 累计票数
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
      timer: null, // 倒计时定时器
      tabList: [{ name: "默认排序" }, { name: "排行榜" }, { name: "规则详情" }],
      currentTab: 0,
      searchKeyword: "",
      participants: [], // 所有参与人员数据
      allParticipants: [], // 完整参与人员数据（不受搜索影响）
      filteredParticipants: [], // 过滤后的参与人员数据
      pageNum: 1,
      pageSize: 9999,
      hasMore: true,
      loadStatus: "loadmore", // loadmore-加载前, loading-加载中, nomore-没有更多
      columns: [[], []], // 瀑布流两列
      defaultAvatar: "https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/20/f_20250320164147A002.png",
      isActivityEnded: false, // 活动是否结束
      topParticipants: [], // 前三名参与者
      hasFetchedEndData: false, // 是否已获取活动结束数据
    };
  },
  /*  mounted() {
    let storedOpenID = uni.getStorageSync("openID");
    if (storedOpenID) {
      this.initUser();
    } else {
      this.autoLogin();
    }
  }, */
  methods: {
    initUser() {
      uni.showLoading();
      getUserInfo()
        .then((res) => {
          if (res.code === 401) {
            this.showloginJs();
          } else {
            this.userInfo = res.data;
            uni.setStorageSync("userInfo", res.data);
            this.aaaa = true;
            uni.hideLoading();
            this.showzhezhao = false;
          }
        })
        .catch((err) => {
          console.error("获取用户信息失败", err);
          uni.hideLoading();
        });
    },
    showloginJs() {
      let that = this;
      uni.login({
        provider: "weixin",
        success: (res) => {
          if (res.code) {
            that.autoLogin(res.code);
          } else {
            uni.hideLoading();
            console.error("登录失败:", res.errMsg);
            uni.showToast({
              title: "微信登录失败，请稍后再试",
              icon: "none",
            });
          }
        },
        fail: (err) => {
          console.error("登录失败:", err);
          uni.showToast({
            title: "微信登录失败，请稍后再试",
            icon: "none",
          });
        },
      });
      // let storedOpenID = uni.getStorageSync("openID");
      // if (storedOpenID) {
      //   this.authKey = storedOpenID;
      //   this.initUser();
      // } else {

      // }
    },
    /* 免登录-每个界面调用 */
    async autoLogin(code) {
      let that = this;
      wx.getUserInfo({
        success(res) {
          const { nickName, avatarUrl, gender } = res.userInfo;
          programlogin({ code, avatar: avatarUrl, nickName, sex: gender }).then((response) => {
            const data = response.data;
            console.log("🚀 ~ programlogin ~ data:", data);
            that.authKey = data.key;
            that.openIdadw = data.openId;
            if (data.type === "login") {
              uni.setStorageSync("uid", data.uid);
              uni.setStorageSync("token", data.token);
              uni.setStorageSync("userInfo_data", data);
              uni.setStorageSync("openID", data.key);
              that.initUser();
              uni.hideLoading();
            } else {
              that.initUserregister();
            }
          });
        },
        fail: () => {
          uni.showToast({
            title: "您需要授权，才能获取您的信息！",
          });
        },
      });
    },
    initUserregister() {
      var params = {
        key: this.authKey,
        type: "routine",
        openId: this.openIdadw,
        phone: "",
        password: "",
        captcha: "",
        codeOrPassword: "3",
        inviterLinkId: "",
      };
      notBindingPhone(params).then((res) => {
        uni.hideLoading();
        if (res.code == 200) {
          const data = res.data;
          uni.setStorageSync("uid", data.uid);
          uni.setStorageSync("token", data.token);
          uni.setStorageSync("userInfo_data", data);
          uni.setStorageSync("openID", this.authKey);
          this.isShow = true;
          this.initUser();
        }
      });
    },
    onChooseAvatar(e) {
      console.log(e);
      var that = this;
      uni.uploadFile({
        url: "https://www.wantongkonggu.cn//api/frontApph7/frontCommon/uploadTuPian?model=maintain&pid=0",
        filePath: e.detail.avatarUrl,
        name: "multipart",
        formData: {
          model: "maintain",
          pid: 0,
        },
        success: function (uploadRes) {
          const data = JSON.parse(uploadRes.data);
          that.$set(that, "newAvatar", data.fileName);
        },
        fail: function (err) {
          console.error("上传失败", err);
        },
      });
    },
    getPhoneNumber(e) {
      if (e.detail.code && e.detail.errMsg == "getPhoneNumber:ok") {
        getUserPhoneNumber(e.detail).then((res) => {
          if (res.code == 200 && res.data.errmsg == "ok") {
            let that = this;
            this.account = res.data.phone_info.phoneNumber;
            this.awdawgawdgrr();
            this.isShow = false;
          } else {
            console.log("🚀 ~ getPhoneNumber ~ res:", res);
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        });
      }
    },
    /* 分享到朋友和朋友圈 */
    onShareAppMessage() {
      return {
        title: "我在参加 " + this.hdinfo.activityName + " ,请为我投票",
        path: "/pages_h5/myCenter/components/votelist",
      };
    },
    /*  gotoLogin() {
      var params = {
        phone: this.account,
        password: "",
        captcha: "",
        key: this.authKey,
        type: "routine",
        codeOrPassword: "3",
        inviterLinkId: "",
        inviteeType: "",
      };
      phoneAndPassword(params).then((res1) => {
        if (res1.code == 200) {
          uni.setStorageSync("userInfo_data", res1.data);
          this.uid = res1.data.uid;
          uni.setStorageSync("uid", res1.data.uid);
          uni.setStorageSync("token", res1.data.token);
          uni.setStorageSync("openID", res1.data.key);
          this.initUser();
          this.awdawgawdgrr();
          this.isShow = false;
        }
      });
    }, */

    awdawgawdgrr() {
      if (this.nickname == "") {
        uni.showToast({
          icon: "none",
          title: "请填写完整！",
        });
        return;
      }
      var params = {
        avatar: this.newAvatar,
        nickname: this.nickname,
        account: this.account,
        phone: this.account,
      };
      userEdit(params).then((res) => {
        this.initUser();
      });
    },
    /*     initUser() {
      getUserInfo().then((res) => {
        if (res.code == 401) {
          this.autoLogin();
        } else {
          this.userInfo = res.data;
        }
      });
    }, */
    /*     autoLogin() {
      var that = this;
      uni.login({
        provider: "weixin",
        success: (res) => {
          if (res.code) {
            that.wechatLogin(res.code);
          } else {
            console.error("登录失败:", res.errMsg);
            uni.showToast({
              title: "微信登录失败，请稍后再试",
              icon: "none",
            });
          }
        },
        fail: (err) => {
          console.error("登录失败:", err);
          uni.showToast({
            title: "微信登录失败，请稍后再试",
            icon: "none",
          });
        },
      });
    }, */

    /*     wechatLogin(code) {
      var that = this;
      wx.getUserInfo({
        success(res) {
          const { nickName, avatarUrl, gender } = res.userInfo;
          programlogin({ code, avatar: avatarUrl, nickName, sex: gender }).then((response) => {
            console.log("🚀 ~ success ~ response:", response);
            const data = response.data;
            that.authKey = data.key;
            if (data.type == "login") {
              uni.setStorageSync("uid", data.uid);
              uni.setStorageSync("token", data.token);
              uni.setStorageSync("userInfo_data", data);
              uni.setStorageSync("openID", data.key);
              that.initUser();
            } else {
              that.isShow = true;
            }
          });
        },
        fail: () => {
          uni.showToast({
            title: "您需要授权，才能获取您的信息！",
          });
          this.showLogin = true;
        },
      });
    }, */

    getactivitylists() {
      getactivitylist().then((res) => {
        this.activelist = res.rows;
        // 循环遍历activelist，查找isOpen为0的活动id
        let found = false;
        for (let i = 0; i < this.activelist.length; i++) {
          if (this.activelist[i].isOpen === 0) {
            // 找到isOpen为0的活动，传递该活动id
            this.gettactive(this.activelist[i].id);
            this.getapplicationList(this.activelist[i].id);
            this.getvotesinfoSum(this.activelist[i].id);
            this.activeid = this.activelist[i].id;
            found = true;
            break; // 只处理第一个找到的isOpen为0的活动
          }
        }

        // 只有在没有找到isOpen为0的活动时才弹出提示
        if (!found) {
          /* 没有活动弹出提示退出界面 */
          uni.showModal({
            title: "提示",
            content: "暂无已上线活动哦~",
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                uni.switchTab({ url: "/pages_h5/index_two/index" });
              }
            },
          });
        }
      });
    },
    gettactive(id) {
      getactivity(id)
        .then((res) => {
          this.hdinfo = res.data;
        })
        .catch((err) => {
          console.error("获取活动信息失败:", err);
        });
    },
    getvotesinfoSum(id) {
      votesinfoSum({ ebVoteActivityId: id || this.activeid }).then((res) => {
        if (res.code == 200) {
          this.totalVotes = res.data;
        }
      });
    },
    // 获取活动信息和参与人员列表
    async getapplicationList(id) {
      try {
        const res = await applicationList({
          ebVoteActivityId: id || this.activeid,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          applicationName: this.searchKeyword,
        });

        if (res.code == 200) {
          this.participantCount = res.total || 0;

          // 初始化倒计时
          this.initCountdown();

          // 处理参与人员数据
          /* if (this.pageNum === 1) {
            this.participants = res.rows || [];
          } else {
            this.participants = [...this.participants, ...(res.rows || [])];
          } */
          this.participants = res.rows || [];

          // 当没有搜索关键词时，更新完整参赛者列表
          if (!this.searchKeyword) {
            this.allParticipants = [...this.participants];
          }

          // 更新前三名（无论是否有搜索关键词）
          this.updateTopParticipants();

          // 更新瀑布流
          this.updateWaterfall();

          // 判断是否还有更多数据
          this.hasMore = this.participants.length < this.participantCount;
          this.loadStatus = this.hasMore ? "loadmore" : "nomore";
        }
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    },

    // 更新前三名
    updateTopParticipants() {
      // 使用完整参赛者列表创建副本并按票数排序
      let sortedParticipants;
      if (this.searchKeyword && this.allParticipants.length > 0) {
        // 搜索时使用完整参赛者列表来确定前三名
        sortedParticipants = [...this.allParticipants].sort((a, b) => {
          return (parseInt(b.numberOfVotes) || 0) - (parseInt(a.numberOfVotes) || 0);
        });
      } else {
        // 无搜索时使用当前参与者列表
        sortedParticipants = [...this.participants].sort((a, b) => {
          return (parseInt(b.numberOfVotes) || 0) - (parseInt(a.numberOfVotes) || 0);
        });
      }

      // 获取前三名
      this.topParticipants = sortedParticipants.slice(0, 3);
    },
    // 初始化倒计时
    initCountdown() {
      // 清除之前的定时器
      if (this.timer) {
        clearInterval(this.timer);
      }

      // 假设活动结束时间在 hdinfo 中
      if (this.hdinfo.endTime) {
        this.updateCountdown(this.hdinfo.endTime);
        this.timer = setInterval(() => {
          this.updateCountdown(this.hdinfo.endTime);
        }, 1000);
      }
    },

    // 兼容iOS的日期解析函数
    parseDate(dateString) {
      if (!dateString) return new Date();

      // 如果已经是Date对象，直接返回
      if (dateString instanceof Date) return dateString;

      // 如果是时间戳，直接创建Date对象
      if (typeof dateString === "number") return new Date(dateString);

      // 处理常见的日期格式
      // 支持 yyyy-MM-dd HH:mm:ss 或 yyyy/MM/dd HH:mm:ss 格式
      if (typeof dateString === "string") {
        // 尝试替换日期分隔符
        let formattedString = dateString.replace(/-/g, "/");

        // 如果包含空格但没有T，则添加T
        if (formattedString.includes(" ") && !formattedString.includes("T")) {
          formattedString = formattedString.replace(" ", "T");
        }

        // 尝试用标准格式解析
        const parsedDate = new Date(formattedString);
        if (!isNaN(parsedDate.getTime())) {
          return parsedDate;
        }

        // 如果上述方法都失败，尝试手动解析
        const parts = dateString.match(/^(\d{4})-(\d{2})-(\d{2})(?:\s+(\d{2}):(\d{2}):(\d{2}))?$/);
        if (parts) {
          const year = parseInt(parts[1], 10);
          const month = parseInt(parts[2], 10) - 1; // 月份从0开始
          const day = parseInt(parts[3], 10);
          const hour = parts[4] ? parseInt(parts[4], 10) : 0;
          const minute = parts[5] ? parseInt(parts[5], 10) : 0;
          const second = parts[6] ? parseInt(parts[6], 10) : 0;

          return new Date(year, month, day, hour, minute, second);
        }
      }

      // 默认情况
      return new Date(dateString);
    },

    // 更新倒计时
    updateCountdown(endTime) {
      const now = new Date().getTime();
      const end = this.parseDate(endTime).getTime();
      const diff = end - now;

      if (diff <= 0) {
        // 活动已结束
        this.days = this.hours = this.minutes = this.seconds = "00";
        this.isActivityEnded = true;
        clearInterval(this.timer);
        // 活动结束后重新获取数据以显示最终结果（只在需要时调用）
        if (!this.hasFetchedEndData) {
          this.getapplicationList();
          this.hasFetchedEndData = true;
        }
        return;
      } else {
        this.isActivityEnded = false;
        this.hasFetchedEndData = false; // 重置标志位
      }

      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);

      this.days = days.toString().padStart(2, "0");
      this.hours = hours.toString().padStart(2, "0");
      this.minutes = minutes.toString().padStart(2, "0");
      this.seconds = seconds.toString().padStart(2, "0");
    },

    // 计算瀑布流中项目的序号
    getColumnIndex(colIndex, item) {
      return item.anumber;
      // 计算在整个列表中的位置
      return colIndex + itemIndex * 2 + 1;
    },

    // 切换 Tabs
    changeTab({ index }) {
      this.currentTab = index;
      // 这里可以根据不同 tab 执行不同操作
      if (index === 2) {
        // 规则详情 tab
        console.log("显示规则详情");
      }
    },

    // 搜索处理
    handleSearch(value) {
      this.searchKeyword = value;
      this.pageNum = 1;
      this.getapplicationList();
    },

    // 清除搜索
    handleClear() {
      this.searchKeyword = "";
      this.pageNum = 1;
      this.getapplicationList();
    },

    // 更新瀑布流布局
    updateWaterfall() {
      const column1 = [];
      const column2 = [];

      this.participants.forEach((item, index) => {
        if (index % 2 === 0) {
          column1.push(item);
        } else {
          column2.push(item);
        }
      });

      this.columns = [column1, column2];
    },

    // 投票
    // 投票
    voteFor(item) {
      console.log("🚀 ~ item:", item);
      // 添加二次确认
      uni.showModal({
        title: "确认投票",
        content: `确定要为"${item.applicationName}"投票吗？每个用户只能投票一次哦~`,
        confirmColor: "#ff4d4f",
        success: (res) => {
          if (res.confirm) {
            // 用户点击确定按钮后执行投票
            votesinfo({
              ebVoteActivityId: item.ebVoteActivityId || this.activeid,
              ebVoteApplicationId: item.id,
              ebUserAccount: this.userInfo.phone,
              ebUserId: uni.getStorageSync("uid"),
              ebUserNickname: this.userInfo.nickname,
              ebUserAvatar: this.userInfo.avatarUrl,
              ebUserPhone: this.userInfo.phone,
            }).then((res) => {
              console.log("🚀 ~ res:", res);
              if (res.code == 200) {
                if (res.data == 0) {
                  uni.showToast({
                    title: "只能投票一次哦~",
                    icon: "none",
                  });
                } else {
                  uni.showToast({
                    title: "投票成功",
                    icon: "none",
                  });
                  // 投票成功后更新票数显示
                  item.numberOfVotes = (parseInt(item.numberOfVotes) || 0) + 1;
                  this.getvotesinfoSum();
                  // 重新排序以更新排名
                  /*  this.participants.sort((a, b) => {
                    return (parseInt(b.numberOfVotes) || 0) - (parseInt(a.numberOfVotes) || 0);
                  }); */
                  this.updateWaterfall();
                  this.updateTopParticipants();
                }
              } else {
                uni.showToast({
                  title: "活动太火爆了,请稍后再试~",
                  icon: "none",
                });
              }
            });
          }
        },
      });
    },

    // 跳转到详情页
    goToDetail(id) {
      console.log("跳转到详情页:", id);
      // 这里实现跳转逻辑
    },

    // 下拉刷新
    onPullDownRefresh() {
      this.pageNum = 1;
      this.getvotesinfoSum();
      this.getapplicationList().finally(() => {
        uni.stopPullDownRefresh();
      });
    },

    // 上拉加载
    onReachBottom() {
      if (this.hasMore && !this.isActivityEnded) {
        this.loadStatus = "loading";
        this.pageNum++;
        this.getapplicationList();
      }
    },
  },

  onLoad() {
    /*   this.getapplicationList(); */
  },
  onLoad(options) {
    this.$nextTick(() => {
      this.initUser();
      this.getactivitylists();
    });
  },

  // 页面销毁时清除定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>
<style scoped>
pageNum {
  width: 100%;
  height: 100%;
}

.pageNum-container {
  position: relative;
  min-height: 100vh;
}

.back_img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #e85757;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
}

.content-wrapper {
  position: relative;
  padding-bottom: 20px;
  min-height: 100vh;
}

.dadwafgada {
  transform: rotate(-5deg);
}

.awdawdfa {
  font-family: "ruizhi";
  font-size: 40px;
  color: #fff;
  letter-spacing: 5px;
  text-stroke: 4px #f92a4c;
  color: transparent;
  -webkit-background-clip: text;
  background-image: linear-gradient(to top, #fff, #fdff6e);
}

.stats-container {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7); /* 半透明背景 */
  -webkit-backdrop-filter: blur(10px); /* Safari浏览器兼容 */
  backdrop-filter: blur(); /* 模糊效果 */
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #e85757;
}

.stat-label {
  font-size: 14px;
  color: #e85757;
}

.countdown-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7); /* 半透明背景 */
  -webkit-backdrop-filter: blur(10px); /* Safari浏览器兼容 */
  backdrop-filter: blur(); /* 模糊效果 */
}

.countdown-label {
  color: #e85757;
  font-size: 16px;
  margin-bottom: 10px;
}

.countdown-timer {
  display: flex;
  gap: 10px;
}

.time-unit {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 5px 10px;
  border-radius: 5px;
  color: #e85757;
  font-weight: bold;
}

.top-three-container {
  padding: 20px 0;
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin-top: 40px;
}

.top-three-title {
  font-size: 20px;
  font-weight: bold;
  color: #e85757;
  margin-bottom: 40px;
}

.top-three-list {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
}

.top-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
}

.top-item.first {
  order: 2;
  transform: translateY(-20px);
}

.top-item.second {
  order: 1;
}

.top-item.third {
  order: 3;
}

.top-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid gold;
}

.top-item.second .top-avatar {
  border-color: #c0c0c0;
}

.top-item.third .top-avatar {
  border-color: #cd7f32;
}

.top-name {
  font-size: 14px;
  margin: 5px 0;
  text-align: center;
}

.top-votes {
  font-size: 12px;
  color: #666;
}

.medal {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.first-medal {
  background: gold;
}

.second-medal {
  background: #c0c0c0;
}

.third-medal {
  background: #cd7f32;
}

.tabs-container {
  margin: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}

.search-container {
  margin: 20px;
}

.content-container {
  padding: 0 20px;
}

.waterfall-container {
  display: flex;
  gap: 10px;
}

.waterfall-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.participant-card {
  position: relative;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.participant-index {
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: gold;

  color: black;
  width: 34px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  z-index: 10;
}

.participant-image {
  width: 100%;
  height: 200px;
}

.participant-info {
  padding: 10px;
}

.participant-name {
  font-size: 16px;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.vote-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vote-count {
  font-size: 14px;
  color: #666;
}

.vote-button {
  background-color: #ff4d4f;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
}

.vote-button[disabled] {
  background-color: #ccc;
}
</style>
